// 全局注册组件
// 1.main.ts中安装插件app.use(plugin)

// 2.plugin是什么？可以一个对象{}，也可以是一个函数function
// 2.1 对象:这个对象中有一个成员install方法,
//     它的身上有形参app,这个app就是当前应用
//     install方法在app.use时自动执行 *
// 2.2 函数:函数相当于install方法

import SealSkeleton from "@/components/skeleton/index.vue";
import SealCarousel from "@/components/carousel/index.vue";
import SealMore from "@/components/more/index.vue";
import SealBread from "@/components/bread/index.vue";
import SealBreadItem from "@/components/bread/item.vue";
import SealCity from "@/components/city/index.vue";
import SealNumbox from "@/components/numbox/index.vue";
import SealButton from "@/components/button/index.vue";
import SealCheckbox from "@/components/checkbox/index.vue";
// import SealMessage from "@/components/message/index.vue";

import { useIntersectionObserver } from "@vueuse/core";
import defaultImg from "@/assets/images/200.png";

import type { App } from "vue";

export default {
  install(app: App) {
    // 全局注册组件
    app.component("SealSkeleton", SealSkeleton);
    app.component("SealCarousel", SealCarousel);
    app.component("SealMore", SealMore);
    app.component("SealBread", SealBread);
    app.component("SealBreadItem", SealBreadItem);
    app.component("SealCity", SealCity);
    app.component("SealNumbox", SealNumbox);
    app.component("SealButton", SealButton);
    app.component("SealCheckbox", SealCheckbox);
    // app.component("SealMessage", SealMessage);

    // 全局自定义指令
    // app.directive(自定义指令名称,配置对象)
    // <img src='地址'>
    // <img v-lazy="图片地址">

    app.directive("lazy", {
      mounted(el, binding) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value;

            stop();

            el.onerror = function () {
              el.src = defaultImg;
            };
          }
        });
      },
    });
  },
};
